<template>
  <view class="diy-banner" :style="{ height: '280rpx' }">
    <!-- 图片轮播 -->
    <swiper
      :autoplay="autoplay"
      class="swiper-box"
      :duration="duration"
      :circular="true"
      interval="3000"
      @change="_bindChange"
    >
      <swiper-item v-for="(dataItem, index) in bannerList" :key="index">
        <image
          mode="aspectFill"
          class="slide-image"
          :src="dataItem.picUrl"
          @click="onLink(dataItem)"
        />
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator-dots">
      <view
        class="dots-item"
        :class="{ active: imgCurrent == index }"
        v-for="(dataItem, index) in bannerList"
        :key="index"
      ></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Banner',
  /**
   * 组件的属性列表
   * 用于组件自定义设置
   */
  props: {
    bannerList: Array
  },
  /**
   * 私有数据,组件的初始数据
   * 可用于模版渲染
   */
  data() {
    return {
      indicatorDots: false, // 是否显示面板指示点
      autoplay: true, // 是否自动切换
      duration: 800, // 滑动动画时长
      imgCurrent: 0 // 当前banne所在滑块指针
    }
  },
  /**
   * 组件的方法列表
   * 更新属性和数据的方法与更新页面数据的方法类似
   */
  methods: {
    /**
     * 记录当前指针
     */
    _bindChange(e) {
      this.imgCurrent = e.detail.current
    },
    onLink(item) {
      console.debug(JSON.stringify(item))
      if (item.actionType === 'none') {
        return
      }
      if (item.actionType === 'page') {
        uni.navigateTo({
          url: item.linkUrl
        })
        return
      }
      if (item.actionType === 'web') {
        uni.navigateTo({
          url: '/universal/webview/webview?url=' + encodeURIComponent(item.linkUrl)
        })
        return
      }
      // 其他情况待处理
    }
  }
}
</script>

<style lang="scss" scoped>
.index-title {
  font-weight: 400;
  font-size: 36rpx;
  color: #333333;
  text-align: center;
  padding: 3rpx;
}

.diy-search {
  // background: #f1f1f2;
  padding: 20rpx 1%;
  font-size: 26rpx;
  // width: 75%;
}

.inner {
  height: 60rpx;
  background: #fff;
  overflow: hidden;

  .radius {
    border-radius: 30rpx;
  }

  &.round {
    border-radius: 60rpx;
  }
}

.search-input {
  height: 60rpx;
  color: #999;
  padding: 0 20rpx;
  display: flex;
  align-items: center;

  .search-icon {
    margin-right: 8rpx;
  }
}

.diy-banner {
  position: relative;
  width: auto;
  margin: auto;
  padding: 0 20rpx;

  // swiper组件
  .swiper-box {
    height: 100%;

    .slide-image {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      display: block;
      border-radius: 10rpx;
    }
  }

  /* 指示点 */
  .indicator-dots {
    width: 100%;
    height: 28rpx;
    padding: 0 20rpx;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20rpx;
    opacity: 0.8;
    display: flex;
    justify-content: center;

    .dots-item {
      width: 16rpx;
      height: 16rpx;
      margin-right: 8rpx;
      background-color: #fff;
      border-radius: 50%;

      &:last-child {
        margin-right: 0;
      }

      &.active {
        background-color: #313131 !important;
      }
    }

    // 圆形
    &.round .dots-item {
      width: 16rpx;
      height: 16rpx;
      border-radius: 20rpx;
    }

    // 正方形
    &.square .dots-item {
      width: 16rpx;
      height: 16rpx;
    }

    // 长方形
    &.rectangle .dots-item {
      width: 22rpx;
      height: 14rpx;
    }
  }
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
</style>
